import 'react-native-gesture-handler';
import React, {useState, useCallback, useEffect} from 'react';
import {
  View,
  Animated,
  Dimensions,
  TouchableWithoutFeedback,
  PanResponder,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Splash from './pages/splash';
import Index from './pages/main/index';
import DrawerContext from './context/drawerContext';
import Drawer from './pages/main/me/drawer';
const Stack = createStackNavigator();

const {width} = Dimensions.get('window');
const leftNum = width * 0.7 * -1;
const rightNum = width - leftNum;

const App = () => {
  const [left] = useState(new Animated.Value(0));
  const [right] = useState(new Animated.Value(0));
  const [showFlag, setshowFlag] = useState(false);
  const [pan, setpan] = useState(null);
  useEffect(() => {
    let pan = PanResponder.create({
      // 要求成为响应者：
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      // onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      // onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderMove: (evt, gestureState) => {
        if (gestureState.dx >= 80) {
          setshowFlag(false);
          Animated.timing(left, {
            toValue: 0,
            duration: 100,
            useNativeDriver: true,
          }).start(() => {
            Animated.timing(right, {
              toValue: 0,
              duration: 100,
              useNativeDriver: true,
            }).start();
          });
        }
      },
    });
    setpan(pan);
  }, []);
  let openDrawer = useCallback(() => {
    setshowFlag(true);
    Animated.timing(right, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true,
    }).start(() => {
      Animated.timing(left, {
        toValue: 1,
        duration: 100,
        useNativeDriver: true,
      }).start();
    });
  }, []);
  return (
    <View style={{flex: 1}}>
      <Animated.View
        style={{
          flex: 1,
          transform: [
            {
              translateX: left.interpolate({
                inputRange: [0, 1],
                outputRange: [0, leftNum],
              }),
            },
          ],
        }}>
        <DrawerContext.Provider value={openDrawer}>
          <NavigationContainer>
            <Stack.Navigator
              screenOptions={{
                headerShown: false,
              }}>
              <Stack.Screen name="Splash" component={Splash} />
              <Stack.Screen name="Index" component={Index} />
            </Stack.Navigator>
          </NavigationContainer>
        </DrawerContext.Provider>
        {showFlag && (
          <TouchableWithoutFeedback
            onPress={() => {
              setshowFlag(false);
              Animated.timing(left, {
                toValue: 0,
                duration: 100,
                useNativeDriver: true,
              }).start(() => {
                Animated.timing(right, {
                  toValue: 0,
                  duration: 100,
                  useNativeDriver: true,
                }).start();
              });
            }}>
            <View
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0,0,0,0.75)',
              }}></View>
          </TouchableWithoutFeedback>
        )}
      </Animated.View>
      <Animated.View
        // {...pan.panHandlers}
        style={{
          width: '70%',
          height: '100%',
          position: 'absolute',
          right: 0,
          top: 0,
          transform: [
            {
              translateX: right.interpolate({
                inputRange: [0, 1],
                outputRange: [rightNum, 0],
              }),
            },
          ],
        }}>
        <Drawer />
      </Animated.View>
    </View>
  );
};

export default App;
